<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <%@include file="/WEB-INF/jspf/top_easyui.jspf" %>
        <link rel="shortcut icon" href="${contextPath}/resources/images/favicon.ico" type="image/x-icon" />
        <link rel="icon" href="${contextPath}/resources/images/favicon.ico" type="image/x-icon" />
        <title>欢迎使用</title>
        <link rel="stylesheet" href="${contextPath}/resources/css/login.css" type="text/css" />     
    </head>
    <body>
        <div class="login-wp">
            <div class="login-ct">
                <div class="login-box">
                    <div class="login-title">
                        <p>用户登录</p>
                    </div>
                    <s:form action="${contextPath}/login" method="post" id="loginFm" commandName="sysUser">
                        <div class="login-item">
                            <label>
                                用户名：
                            </label>
                            <div class="login-item-input"> 
                                <s:input path="account" tabindex="1" value="请输入用户名" id="login_name"/>
                            </div>
                        </div>
                        <div class="login-item">
                            <label>
                                密&nbsp;&nbsp;码：
                            </label>
                            <div class="login-item-input">
                                <span class="login-tip" id="psw_tip">请输入密码</span>
                                <input type="text" name="password" vaule="请输入密码" tabindex="2" onfocus="this.type = 'password'" id="login_password"/>
                            </div>
                        </div>

                        <div class="login-item">
                            <label>
                                验证码：
                            </label>
                            <div class="login-item-input">
                                <input value="验证码" tabindex="3"  style="ime-mode:disabled ;" class="login-code" type="text" name="codeInp" id="code_inp"/>
                                <div class="code-box">
                                    <img title="点击换一张"  src="${contextPath}/captcha-image" id="kaptchaImage"  /> 
                                    <img id="loading" src="${contextPath}/resources/images/loading.gif" style="display: none;margin-left: 20px;vertical-align: middle;" />
                                </div>
                                <div class="change-text">
                                    <a href="#" id="change_text_id" title="点击换一张"></a>
                                </div>
                            </div>
                        </div>
                        <div class="error-tip">
                            <s:errors path="*" id="errorSpan" cssStyle="color: red;font-size:15px;"/>
                        </div>
                        <div class="login-item">
                            <div class="login-item-input">
                                <input type="submit" value="登  陆" class="login-submit" />
                            </div>
                        </div>

                        <div class="login-arrow"></div>
                    </s:form>
                    <div class="clear"></div>
                </div>
                <div class="logo-tip">
                    ©2008-2013<a href="#">福州云动科技有限公司</a>版权所有。技术支持：18950295137
                </div>
            </div>
        </div>

        <script type="text/javascript">
                    $(document).ready(function() {
                        var loginWpTop = ($(window).height() - $('.login-wp').height()) / 2-60;
                        $('.login-wp').css('top', loginWpTop);
                        $('.login-submit').click(function() {
                            if ($('#login_name').val() == '请输入用户名') {
                                $('.error-tip').html('请输入用户名！');
                                return false;
                            } else if ($('#login_password').val() == '') {
                                $('.error-tip').html('请输入密码！');
                                return false;
                            } else if ($("#code_inp").val() == "验证码") {
                                $('.error-tip').empty().html('请输入验证码！');
                                return false;
                            };
                        });
                        $('#login_name').focus(function() {
                            if ($(this).val() == '请输入用户名') {
                                $(this).val('');
                                $(this).css('color', '#000');
                            };
                            $(this).addClass('focus');
                        });
                        $('#psw_tip').show();
                        $('#login_name').blur(function() {
                            if ($(this).val() == '') {
                                $(this).css('color', '#666');
                                $(this).val('请输入用户名');
                            };
                            $(this).removeClass('focus');
                        });
                        $('#psw_tip').click(function() {
                            $(this).hide();
                            $(this).next('input').focus().css('color', '#000').addClass('focus');
                        });

                        $('#login_password').focus(function() {
                            $('#psw_tip').hide();
                        });
                        $('#login_password').focus(function() {
                            $(this).css('color', '#000').addClass('focus');
                        });
                        $('#login_password').blur(function() {
                            if ($(this).val() == '') {
                                $('#psw_tip').val('请输入密码').show();
                            };
                            $(this).removeClass('focus');
                        });

                        $('.login-code').focus(function() {
                            if ($(this).val() == '验证码') {
                                $(this).val('');
                            };
                            $(this).css('color', '#000').addClass('focus');
                        });

                        $('.login-code').blur(function() {
                            if ($(this).val() == '') {
                                $(this).val('验证码').css('color', '#666');
                            };
                            $(this).removeClass('focus');
                        });
                        $('.login-submit').hover(function() {
                            $(this).toggleClass('login-submit-alpha');
                        }, function() {
                            $(this).toggleClass('login-submit-alpha');
                        });

                        $('#kaptchaImage').click(function() {
                            changeCodeImg();
                        });
                        $('#change_text_id').click(function() {
                            changeCodeImg();
                        });
                        function changeCodeImg() {
                            $('#kaptchaImage').hide().attr('src', '${contextPath}/captcha-image?' + Math.floor(Math.random() * 100)).fadeIn();
                        };
                    });
        </script>
    </body>

</html>
